<template>
    <div class="selectMonth">
        <el-date-picker :editable="false" :clearable="false" v-model="month" type="month" placeholder="选择月" format="M月"></el-date-picker>
    </div>
</template>

<script>
// $(function() {
//   $(".el-date-picker__header > button").removeClass(".el-icon-caret-left");
// });

export default {
  data() {
    return {
      month: new Date()
    };
  }
};
</script>

<style lang="scss">
@import "../../style/bossVersion/_basics";

.selectMonth {
  @include flexXend;
  .el-date-editor.el-input {
    @include flexYcen;
    width: 0.95rem !important;
    height: 0.4rem !important;
    padding-right: 0 !important;
    background-color: $color0 !important;
    border-radius: 0 !important;
  }
  .el-input__inner {
    width: calc(100% / 2) !important;
    height: 0.4rem !important;
    padding: 0 !important;
    color: $color1 !important;
    font-size: 0.14rem !important;
    text-align: center !important;
    line-height: 1 !important;
    border: 1px solid transparent !important;
    background-color: transparent !important;
    &::-webkit-input-placeholder {
      height: 0.4rem !important;
      color: $color1 !important;
      font-size: 0.14rem !important;
      text-align: center !important;
    }
  }
  //   图标
  .el-input__prefix {
    position: initial !important;
    top: initial !important;
    width: calc(100% / 2) !important;
    height: initial !important;
    color: inherit !important;
    .el-input__icon {
      line-height: 0.4rem !important;
    }
    & > .el-icon-date:before {
      content: "" !important;
      display: inline-block !important;
      width: 0.14rem !important;
      height: 0.14rem !important;
      background: url("../../../static/img/bossVersion/date.png") left top
        no-repeat / 100% 100% !important;
    }
  }
}
//   日期选择器
.el-picker-panel {
  top: 1.48rem !important;
  left: 1.45rem !important;
  width: 2.2rem !important;
  //   height: 320px;
  margin: 0 !important;
  background-color: $color0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.el-date-picker .el-picker-panel__content {
  width: 214px !important;
  margin: 0 !important;
}
.el-date-picker__header--bordered {
  padding-bottom: 0.12rem !important;
  margin: 0.12rem !important;
  margin-bottom: 0 !important;
  border-bottom: transparent !important;
}
.el-picker-panel__icon-btn,
.el-date-picker__header-label,
.el-month-table td .cell,
.el-date-picker__header-label:hover {
  color: $color1;
}
.el-month-table td,
.el-year-table td {
  padding: 0 0.05rem 0.05rem !important;
}
.el-month-table td .cell,
.el-year-table td .cell {
  height: 0.48rem !important;
  line-height: 0.48rem !important;
  color: rgba($color1, 0.5);
  font-size: 0.12rem !important;
  background-color: $dataBack !important;
  border: 1px solid $dataBack !important;
}
.el-month-table td .cell:hover,
.el-year-table td .cell:hover {
  color: $color1 !important;
  background-color: $dataBack !important;
  border: 1px solid $color1 !important;
}
.el-month-table td.current:not(.disabled) .cell,
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell {
  color: $color1 !important;
  font-weight: bold !important;
  background-color: $dataBack !important;
  border: 1px solid $color1 !important;
}
.popper__arrow {
  display: none !important;
}
</style>

